<!-- 邀请排行 -->
<template>
	<view>
		<view class="head">
			<navigator class="rule_box" url="/pages/blindbox/activity-rules/activity-rules">活动规则</navigator>
			<view class="head_t">
				<text class="head_txt">我的排行</text>
				<text>{{info.rank}}</text>
			</view>
			<view class="head_txt_two">
				<text>我的邀请：{{info.totalNum}}</text>
				<view class="go_invite" @click="jumpInvitation" v-if="token!=''">
					<text>前往邀请</text>
					<image class="right_white" src="@/static/blindbox/jackpot/right_white.png" mode=""></image>
				</view>
				<navigator class="go_invite" url="/pages/login/login" v-if="token==''">
					<text>未登录</text>
					<image class="right_white" src="@/static/blindbox/jackpot/right_white.png" mode=""></image>
				</navigator>
			</view>
			<view class="head_txt_two">
				活动时间：{{info.startDate}} - {{info.endDate}}
			</view>
		</view>
		<view class="main">
			<view class="main_box" v-for="(item,index) in list" :key="index">
				<view class="main_box_l">
					<image class="rank_img" v-if="index==0" src="@/static/blindbox/jackpot/first.png" mode=""></image>
					<image class="rank_img" v-else-if="index==1" src="@/static/blindbox/jackpot/second.png" mode="">
					</image>
					<image class="rank_img" v-else-if="index==2" src="@/static/blindbox/jackpot/third.png" mode="">
					</image>
					<text class="rank_num" v-else>{{index+1}}</text>
					<image class="avatar" :src="item.avatar==''?'../../../static/blindbox/avant_null.png':item.avatar" mode="aspectFill"></image>
					<text class="phone">{{item.phone}}</text>
				</view>
				<view class="main_box_r">
					总邀请:{{item.totalNum}}
				</view>
			</view>
		</view>
		<invitation-tasks ref="child"></invitation-tasks>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				token:'',
				activityId: '', //活动id
				list: [],
				info:{},
				pageNumber: 1,//当前页数
				pageSize: 10,//分页大小
				listTotal: 0,//列表总数
			}
		},
		onLoad() {
			this.token = uni.getStorageSync('token')
			this.getMyRanking()
			this.getList()
		},
		onHide() {
			uni.removeStorageSync('person-card');
		},
		methods: {
			jumpInvitation() { //邀请按钮
				this.$refs.child.open();
			},
			async getMyRanking() { //获取我的排名信息
				uni.showLoading()
				let data = {
					activityId: this.activityId,
				}
				const res = await this.$api.getMyInvite(data);
				uni.hideLoading()
				this.info = res.result;
			},
			async getList() { //获取排名列表
				let data = {
					// activityId: this.activityId,
					// pageNum:this.pageNumber,
					// pageSize:this.pageSize,
				}
				const res = await this.$api.getInviteList(data);
				this.list = res.result;
				// this.listTotal = res.result.total
				// if (this.pageNumber > 1) {
				// 	this.list = this.list.concat(res.result.records); //将数据拼接在一起
				// } else {
				// 	this.list = res.result.records
				// }
				// this.list = [				// 	{				// 		avatar:'https://kayouyou-1257308601.cos.ap-guangzhou.myqcloud.com/ded9fb8497024565a4ba312ca67d153a.png',				// 		customerId:'1',				// 		customerName:'183****4586',				// 		totalNum: 30				// 	}				// ]
			}
		},
		//页面上拉触底事件的处理函数
		onReachBottom: function() {
			console.log("触底了", this.pageNumber, Math.ceil(this.listTotal / this.pageSize), this.listTotal)
			if (this.pageNumber >= Math.ceil(this.listTotal / this.pageSize)) {
				console.log('没有分页')
				// this.lodingtype = 1
			} else {
				// this.lodingtype = 0
				this.pageNumber++; //每触底一次 page + 1;
				this.getList();
			}
		},
		
	}
</script>

<style>
	view {
		box-sizing: border-box;
	}

	.head {
		width: 100%;
		height: 340rpx;
		background: linear-gradient(180deg, #069AFC 0%, #55D2CD 93.62%);
		padding: 50rpx;
	}
	.rule_box{
		width: 114rpx;
		height: 48rpx;
		border-radius: 40rpx 0rpx 0rpx 40rpx;
		background: rgba(0, 34, 99, .5);
		text-align: center;
		line-height: 48rpx;
		color: #FFFFFF;
		font-size: 22rpx;
		position: absolute;
		right: 0;
		top: 24rpx;
	}
	.head_t {
		color: #fff;
		font-size: 44rpx;
		margin-bottom: 12rpx;
		/* font-weight: bold; */
	}

	.head_txt {
		font-size: 30rpx;
		color: #FFFFFF;
		margin-right: 22rpx;
	}
	.head_txt_two{
		font-size: 30rpx;
		color: #FFFFFF;
		margin-right: 22rpx;
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
	}
	.go_invite{
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24rpx;
		color: #FFFFFF;
		width: 148rpx;
		height: 44rpx;
		border-radius: 100rpx;
		border: 2rpx solid #fff;
		margin-left: 22rpx;
	}
	.right_white{
		width: 11rpx;
		height: 14rpx;
		margin-left: 6rpx;
	}

	.main {
		background: #FFFFFF;
		border-radius: 40rpx 40rpx 0rpx 0rpx;
		margin-top: -70rpx;
		padding-bottom: 100rpx;
	}

	.main_box {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 26rpx 0rpx;
		margin: 0 40rpx;
		border-bottom: 2rpx solid #E1E1E1;
	}

	.rank_img {
		width: 39rpx;
		height: 46rpx;
	}

	.main_box_l {
		display: flex;
		align-items: center;
	}

	.rank_num {
		font-size: 30rpx;
		color: #222222;
		/* font-weight: 600; */
		width: 39rpx;
		height: 46rpx;
		text-align: center;
		line-height: 46rpx;
	}

	.phone {
		font-size: 32rpx;
		color: #222222;
		/* font-weight: 600; */
	}

	.avatar {
		width: 64rpx;
		height: 64rpx;
		border-radius: 50%;
		margin: 0 24rpx;
	}

	.main_box_r {
		font-size: 30rpx;
		color: #222222;
	}
</style>
